/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2023-12-18 15:08:27
 * @LastEditors: GuitarXiaohe 2205227953@qq.com
 * @LastEditTime: 2024-02-03 21:06:40
 * @FilePath: /umi/src/components/xh-components/p-operate/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from "react";
import { connect } from "umi";
import {
  PlusOutlined,
  FormOutlined,
  DeleteOutlined,
  SearchOutlined,
  DownOutlined,
} from "@ant-design/icons";

import { Button, Dropdown, Popconfirm, Modal } from "antd";
const { confirm } = Modal;
import "./index.less";
const XHoperate = (props) => {
  const { list, num = 3, user } = props;

  const [popoverList, setPopoverList] = useState([]);
  const [data, setData] = useState([]);
  // 过滤前三个
  const getPopoverList = () => {
    if (!list) return setData([]);
    let arr = [];
    // 最高权限
    // user.permissions == "*:*:*"; user.permissions == "*:*:*" ||
    arr = list.filter(
      (t) => user.permissions == "*:*:*" || user.permissions.includes(t.permissions)
    );
    setPopoverList(arr?.length > num ? arr.slice(num, arr?.length || 0) : []);
  };

  // 保留前三个
  const getData = () => {
    if (!list) return setData([]);
    let arr = [];
    arr = list.filter(
      (t) => user.permissions == "*:*:*" || user.permissions.includes(t.permissions)
    );
    setData(arr?.length > num ? arr.slice(0, num) : arr);
  };

  // 匹配数值
  const p = [
    {
      text: "新增",
      icon: <PlusOutlined />,
    },
    {
      text: "修改",
      icon: <FormOutlined />,
    },
    {
      text: "删除",
      icon: <DeleteOutlined />,
    },
    {
      text: "查看",
      icon: <SearchOutlined />,
    },
  ];

  // 匹配icon
  const icon = (val) => {
    const r = p.find((t) => t.text == (val.label || val.text));
    if (r) return r.icon;
  };

  useEffect(() => {
    getPopoverList();
    getData();
  }, []);
  //  判断是否需要
  const gd = () => {
    return list?.length > num ? (
      <Dropdown
        menu={{
          items: popoverList.map((t, ind) => ({
            label: (
              <Button
                className="btnClass"
                type={t.type || "primary"}
                key={ind}
                disabled={t.disabled}
                danger={t.danger}
                icon={t.icon || icon(t)}
                size="small"
                onClick={() => {
                  if (t.showMsg) {
                    confirm({
                      title: t.showMsgTitle || "系统提示",
                      icon: t.showMsgIcon || false,
                      content: t.content || "是否删除该数据?",
                      onOk() {
                        t.emit();
                      },
                    });
                  } else {
                    t.emit();
                  }
                }}
              >
                {t.label || t.text}
              </Button>
            ),
            key: ind,
          })),
        }}
        placement="top"
      >
        <Button size="small" icon={<DownOutlined />}>
          更多
        </Button>
      </Dropdown>
    ) : (
      ""
    );
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      {data.map((t, ind) => (
        <Button
          className="btnClass"
          type={t.type || "primary"}
          danger={t.danger}
          icon={t.icon || icon(t)}
          size="small"
          key={ind}
          onClick={() => {
            if (t.showMsg) {
              confirm({
                okText: t.okText || "确认",
                cancelText: t.cancelText || "取消",
                title: t.showMsgTitle || "系统提示",
                icon: t.showMsgIcon || false,
                content: t.content || "是否删除该数据?",
                onOk() {
                  t.emit();
                },
              });
            } else {
              t.emit();
            }
          }}
        >
          {t.label || t.text}
        </Button>
      ))}

      {gd()}
    </div>
  );
};
export default connect((state) => ({ user: state.user }))(XHoperate);
